<template>
  <a-space style="margin-bottom: 10px;">

  <a-dropdown>
    <a-button class="ant-dropdown-link" @click.prevent style="left: 30%" >
      {{ AreaName }}
    </a-button>
    <template #overlay>
      <a-menu>
        <a-menu-item v-for="item in state.areas" :key="item" style="text-align: center">
          <a href="javascript:;" @click="chooseArea(item.id, item.name)"
            >{{ item.name }}</a
          >
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>

    <a-input-group compact style="left: 70px">
      <a-select v-model:value="state.selectCondition">
        <a-select-option value="department">部门</a-select-option>
        <a-select-option value="hospital">医院</a-select-option>
        <a-select-option value="role">职位</a-select-option>
      </a-select>
      <a-input v-model:value="input" style="width: 70%" />
    </a-input-group>



  </a-space>
<a-button type="primary" @click="exportWord" style="float: right">导出会诊统计报告</a-button>
  <a-table
    :columns="columns"
    :data-source="state.filterExperts"
    :rowKey="(record) => record.id"
  >
    <template #action="record">
      <div>
        <a-popconfirm
          title="确认选择吗?"
          ok-text="Yes"
          cancel-text="No"
          @confirm="confirm(record.record.id, record.record.name)"
          @cancel="cancel"
        >
          <a href="#">选择</a>
        </a-popconfirm>
      </div>
    </template>
  </a-table>

  <a-modal
    title="请输入需要会诊的诊疗编号"
    v-model:visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk(state.cureId)"
  >
    <a-form
      :model="state.cureId"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="诊疗编号">
        <a-input v-model:value="state.cureId" style="width: 300px;" />
      </a-form-item>
    </a-form>
    <a-dropdown>
      <a class="ant-dropdown-link" @click.prevent>
        请输入诊疗编号或在此选择
        <DownOutlined />
      </a>

      <template #overlay>
        <a-menu>
          <a-menu-item v-for="item in state.cure" :key="item">
            <a href="javascript:;" @click="chooseCure(item.id)"
              >诊疗编号:{{ item.id }}-病人编号:{{ item.patientId }}-姓名:{{
                item.name
              }}-病人诊断年龄:{{ item.presentAge }}-病人当前年龄:{{
                item.age
              }}</a
            >
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </a-modal>


</template>
<script>
import { defineComponent, ref, onMounted, reactive, watch } from "vue";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import {
  reqGetExpertsByAreaId,
  reqAddVisitInfo,
  reqGetAllArea,
  reqGetCureVOs,
} from "../api/index";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
dayjs.extend(relativeTime);
const columns = [
  {
    title: "id",
    dataIndex: "id",
    key: "id",
    align: 'center',
  },
  {
    title: "部门",
    dataIndex: "department",
    key: "department",
    align: 'center',
  },
  {
    title: "职位",
    dataIndex: "role",
    key: "role",
    align: 'center',
  },
  {
    title: "医院",
    dataIndex: "hospital",
    key: "hospitalId",
    align: 'center',
  },
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    align: 'center',
  },
  {
    title: "区域",
    dataIndex: "area",
    key: "area",
    align: 'center',
  },
  {
    title: "操作",
    dataIndex: "",
    width: 200,
    key: "x",
    fixed: 'right',
    align: 'center',
    slots: {
      customRender: "action",
    },
  },
];
export default defineComponent({
  components: {
    // DownOutlined,
  },
  setup() {
    const store = useStore();
    const comments = ref([]);
    const modalText = ref("Content of the modal");
    const value = ref("");
    const visible = ref(false);
    const confirmLoading = ref(false);
    const AreaName = ref("请选择专家区域")
    const state = reactive({
      experts: [],
      toInfo: {},
      cureHistory: [],
      cureId: 0,
      areas: [],
      input: "",
      selectCondition: "department",
      filterExperts: [],
    });
    const input = ref("");
    const router = useRouter();

    onMounted(async () => {
      let res = await reqGetAllArea();
      state.areas = res.data;
    });

    watch(input, (newValue, oldValue) => {
      console.log("new", newValue, "old", oldValue);
      if (newValue != "") {
        state.filterExperts = state.experts.filter((expert) => {
          console.log(expert[state.selectCondition]);
          return expert[state.selectCondition].indexOf(newValue) != -1;
        });
      } else {
        state.filterExperts = state.experts;
      }
    });

    watch(
      () => state.selectCondition,
      (newValue, oldValue) => {
        console.log("new", newValue, "old", oldValue);
        if (input.value != "") {
          state.filterExperts = state.experts.filter((expert) => {
            console.log(expert[state.selectCondition]);
            return expert[state.selectCondition].indexOf(newValue) != -1;
          });
        } else {
          state.filterExperts = state.experts;
        }
      }
    );

    const exportWord = () => {
      window.location.href = "/api/visit-info/report";
    };

    const confirm = async (id, name) => {
      state.toInfo.id = id;
      state.toInfo.name = name;
      store.state.toInfo = state.toInfo;
      store.state.isRequest = true;
      let result = await reqGetCureVOs();
      state.cure = result.data;
      store.state.baseInfo = result.data;

      visible.value = true;
      confirmLoading.value = false;
    };

    const handleOk = async () => {
      modalText.value = "please wait for sometime";
      confirmLoading.value = true;
      visible.value = false;
      confirmLoading.value = false;
      store.state.cureId = state.cureId;
      let result = await reqAddVisitInfo({
        requestDoctorId: sessionStorage.getItem("userId"),
        cureId: state.cureId,
      });
      store.state.visitId = result["data"];
      router.push("/console/visit");
    };

    const chooseArea = async (id, name) => {
      let result = await reqGetExpertsByAreaId(id);
      state.experts = result.data;
      AreaName.value =  name;
      state.filterExperts = result.data;
    };

    const chooseCure = async (id) => {
      state.cureId = id;
    };

    const cancel = (e) => {
      console.log(e);
      // message.error("Click on No");
    };

    return {
      comments,
      value,
      state,
      columns,
      confirm,
      handleOk,
      visible,
      confirmLoading,
      modalText,
      cancel,
      exportWord,
      store,
      chooseArea,
      chooseCure,
      input,
      AreaName,

    };
  },
});
</script>

